<template>
  <div class="col-sm-12">
    <div class="card-box" style="width: 40%;">
      <el-button-group>
        <el-button size="small" type="success" icon="el-icon-user-solid" @click="selectUser()">拉取新的员工</el-button>
        <el-button style="margin-left: 10px;" size="small" type="danger" icon="el-icon-delete" @click="BatchdeleteUser()">删除选中成员</el-button>
      </el-button-group>
      <table class="table">
        <thead>
          <tr>
            <th style="width:20px"></th>
            <th>工号</th>
            <th>姓名</th>
            <th>身份</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, index) in data" :key="index">
            <input type="checkbox" style="margin-top:10px" :value="item.group.uid" v-model="checkVal">
            <td>{{item.group.uid}}</td>
            <td>{{item.name}}</td>
            <td>{{item.group.upermission}}</td>
          </tr>
        </tbody>
      </table>
      <div align="center" >
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
            :page-sizes="[5, 10, 20, 40]" :page-size="pagesize" layout="total, prev, pager, next, jumper" :total="parseInt(this.total)">
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        checkVal: [],
        ps: this.$store.state.permission,
        ids: '',
        currentPage: 1, //初始页
        pagesize: 6,
      };
    },
    props: ['data', 'path','total'],
    methods: {
      // 初始页currentPage、初始每页数据数pagesize和数据data
      handleSizeChange: function(size) {
        this.pagesize = size;
      },
      handleCurrentChange: function(currentPage) {
        this.currentPage = currentPage;
        this.$parent.loadUsers(this.currentPage,this.pagesize);
      },
      BatchdeleteUser() {
        let Ids = JSON.stringify(this.checkVal);
        let UId = this.$store.state.userId;
        let GroupId = this.$route.query.GroupId;
        this.$axios.post('/api/Group/DeleteUserOfGroup?UId=' + UId + '&GroupId=' + GroupId, Ids)
          .then(res => {
            console.log(res);
            this.$notify.success({
              title: '成功',
              message: '移除用户成功',
            });
            this.$router.push({
              path: '/manage/groupinfo',
              query: {
                AdminId: UId,
              }
            })
          })
          .catch(err => {
            console.log(err)
          });
      },
      selectUser() {
        let GroupId = this.$route.query.GroupId;
        this.$router.push({
          path: '/manage/addmemberinfoex',
          query: {
            GroupId:GroupId,
          }
        });
      },
    },
  };
</script>
<style scoped>
  .popoverBackB {
    /* #303133是el-tooltip的背景色 */
    background-color: transparent !important;
  }

  .popoverBackB .popper__arrow::after {
    /* 注意：placement位置不同，下面的属性不同 */
    border-bottom-color: transparent !important;
  }
</style>
